/*
 * @Description:vite 配置文件
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-12-29 09:57:47
 */
import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path'
import usePlugins from './vite/plugin'
import { BUILD_PATH } from './vite/constant'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
export default defineConfig(({ command, mode, ssrBuild }) => {
  /**根据 "mode" 值 读取获取本地环境变量中的.env.[mode]中 VITE_BASE_URL 的值 */
  const baseUrl = loadEnv(mode, process.cwd()).VITE_BASE_URL
  /**是否是生产环境 */
  const isProduction = mode === 'production'
  console.log({ mode, baseUrl })
  return {
    //插件
    plugins: usePlugins(),
    resolve: {
      //配置别名
      alias: {
        '@': resolve(__dirname, 'src')
      },
      extensions: ['.js', '.ts', '.jsx', 'tsx', '.json', '.mjs']
    },
    // vite 中使用 less/scss/sass/stylus 等 css 预处理器, 直接进行安装，不用像 webpack 那样安装 loader 和配置
    css: {
      /**预处理 */
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/style/global-scss-var.scss" as *;`
        }
      },
      // vite 中已集成了 postcss
      postcss: {
        plugins: [
          //此处必须添加插件才能使用
          tailwindcss,
          autoprefixer({
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8',
              '> 1%'
            ],
            grid: true
          }),
          // 去除警告: [WARNING] "@charset" must be the first rule in the file
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: atRule => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              }
            }
          }
          /**移动端适配需要用到 */
          // pxtorem({
          // rootValue: 100, // (设计稿/10）1rem的大小 (详见: global.scss中 html{font-size: 26.6666666vw;})
          // propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          // selectorBlackList: ['.norem'], // 过滤掉.norem-开头的class，不进行rem转换
          // exclude: /node_modules/i,
          // })
        ]
      }
    },
    /**
     *
     * esbuild配置
     * 删除打印 debugger
     *
     **/
    esbuild: {
      drop: isProduction ? ['console', 'debugger'] : [] //生产环境才删除打印
    },

    /**
     * 服务器设置
     */
    server: {
      host: true,
      /**自动打开浏览器 */
      open: false,
      port: 8080,
      /**
       * 代理
       * 可添加多个
       */
      proxy: {
        '/api': {
          target: baseUrl,
          ws: true, //代理 websocket链接
          changeOrigin: true, //换源
          rewrite: path => path.replace('/api', '') // 将 "/api"替换成""
        },
        '/dev-api': {
          target: 'http://192.168.1.56:28010/',
          changeOrigin: true,
          rewrite: p => p.replace(/^\/dev-api/, '')
        }
      }
    },

    /**
     * 打包配置
     * ❗❗❗如果遇到打包报错  请检查页面图片资源的引用路径是否正确 ❗❗❗
     */
    build: {
      /**小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
       * 默认： 4096 (4kb)
       */
      assetsInlineLimit: 300,
      /**
       * 清空原来打包的文件
       */
      emptyOutDir: true,
      outDir: isProduction ? './dist' : BUILD_PATH,
      /**
       * 指定构建目标，最低支持 es2015
       */
      target: 'es2015',
      /**打包模块超出大小警告 Kb */
      chunkSizeWarningLimit: 1500,
      /**打包选项 */
      rollupOptions: {
        /**输出 */
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id) {
            //静态资源分拆打包
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          }
        }
      }
    }
  }
})
